home *** CD-ROM | disk | FTP | other *** search
/ PC World Komputer 2010 April / PCWorld0410.iso / pluginy Firefox / 60914 / 60914.xpi / chrome / content / ajaxUpload.js next >
Encoding:
Text File  |  2010-01-20  |  9.4 KB  |  300 lines
  1.  
  2.  
  3.     var PersonasRotatorAjaxUpload={
  4.         
  5.         asking:false,
  6.  
  7.         hidetooltip: function(event){
  8.  
  9.             var intendedTooltip=document.getElementById(event.target.id.split("icon")[0]+"div");
  10.             intendedTooltip.style.display="none";
  11.             
  12.         },
  13.  
  14.         showtooltip: function (event){
  15.  
  16.             var intendedTooltip=document.getElementById(event.target.id.split("icon")[0]+"div");    
  17.             intendedTooltip.style.top=event.pageY+"px";    
  18.             intendedTooltip.style.left=(event.pageX+15)+"px";    
  19.             intendedTooltip.style.display="block";
  20.             
  21.         },
  22.  
  23.         movetooltip: function (event){
  24.  
  25.             var intendedTooltip=document.getElementById(event.target.id.split("icon")[0]+"div");
  26.             intendedTooltip.style.top=event.pageY+"px";    
  27.             intendedTooltip.style.left=(event.pageX+15)+"px";
  28.  
  29.         },
  30.  
  31.         startAjaxUpload: function (event){
  32.                 
  33.             try{
  34.                 
  35.                 var url;
  36.                 var req;
  37.                 var formFile=document.getElementById('personafile').files[0];
  38.                 var formFileMIMEType = document.defaultView.personaRotator.personaMIMEType;
  39.                 var formFileBinary=formFile.getAsBinary();
  40.                 var formtitle = document.getElementById('personaname').value;
  41.                 var formtags = document.getElementById('personatags').value;
  42.                 var formdescription = document.getElementById('personadescription').value;
  43.                 var formposition = document.getElementById('position').value;
  44.                 var formscreenRes = document.getElementById('screenRes').value;
  45.                 var formbackgroundColor = document.getElementById('backgroundColor').value;
  46.                 var formmedProfId = document.getElementById('medProfId').value;
  47.                 var formFileFileName = document.getElementById('personafile').value;
  48.                 var trimmedFormFileFileName = formFile.fileName;
  49.                 var formUploadButtonValue = "upload";
  50.  
  51.                 function f(o){
  52.                     var scriptableUnicodeConverter = Components.classes['@mozilla.org/intl/scriptableunicodeconverter']
  53.                                         .createInstance(Components.interfaces.nsIScriptableUnicodeConverter);
  54.                     scriptableUnicodeConverter.charset = "UTF8";
  55.                     return scriptableUnicodeConverter.ConvertFromUnicode(o);
  56.                 }
  57.                 
  58.                 var boundaryString = '3e0c7f3a3f504730beb54a9a10e2831c';
  59.                 var boundary = '--' + boundaryString;
  60.                 var requestBody = boundary + '\n' 
  61.                 + 'Content-Disposition: form-data; name="title"' + '\n' 
  62.                 + '\n' 
  63.                 + f(formtitle) + '\n' 
  64.                 + boundary + '\n'  
  65.                 + 'Content-Disposition: form-data; name="tags"' + '\n' 
  66.                 + '\n' 
  67.                 + f(formtags) + '\n' 
  68.                 + boundary + '\n'  
  69.                 + 'Content-Disposition: form-data; name="description"' + '\n' 
  70.                 + '\n' 
  71.                 + f(formdescription) + '\n' 
  72.                 + boundary + '\n'   
  73.                 + 'Content-Disposition: form-data; name="position"' + '\n' 
  74.                 + '\n' 
  75.                 + formposition + '\n' 
  76.                 + boundary + '\n'   
  77.                 + 'Content-Disposition: form-data; name="screenRes"' + '\n' 
  78.                 + '\n' 
  79.                 + formscreenRes + '\n' 
  80.                 + boundary + '\n'   
  81.                 + 'Content-Disposition: form-data; name="backgroundColor"' + '\n' 
  82.                 + '\n' 
  83.                 + formbackgroundColor + '\n' 
  84.                 + boundary + '\n'   
  85.                 + 'Content-Disposition: form-data; name="medProfId"' + '\n' 
  86.                 + '\n' 
  87.                 + formmedProfId + '\n' 
  88.                 + boundary + '\n' 
  89.                 + 'Content-Disposition: form-data; name="uploadFile"; filename="' 
  90.                 + f(trimmedFormFileFileName) + '"' + '\n' 
  91.                 + 'Content-Type: '+ formFileMIMEType + '\n'
  92.                 + '\n'
  93.                 + formFileBinary+ '\n'  
  94.                 + boundary + '\n'   
  95.                 + 'Content-Disposition: form-data; name="upload"' + '\n'
  96.                 + '\n'        
  97.                 + formUploadButtonValue + '\n'         
  98.                 + boundary;
  99.  
  100.                 if(requestBody.length>650*1024){
  101.                     
  102.                     alert("Description can not be over 50KB long. Please re-edit the description area");
  103.                     PersonasRotatorAjaxUpload.asking=false;
  104.                     return;
  105.                 
  106.                 }
  107.                 
  108.                 event.target.disabled=true;
  109.                 
  110.                 function updateProgress(event) {
  111.  
  112.                     document.getElementsByTagName("button")[0].firstChild.nodeValue=parseInt((event.position/event.totalSize)*100)+"%";
  113.  
  114.                 }
  115.             
  116.                 function ajaxOnLoad(event) {
  117.  
  118.                     if(req.responseText.indexOf("http://personasrotator.com/persona/gallery/")==0){
  119.  
  120.                         var responseText=req.responseText;
  121.                         
  122.                         document.defaultView.personasrotatorretrievedSiteURI=responseText;
  123.                     
  124.                         //persona uploaded successfully. Send the notification to the database.
  125.                         var uploadedTrueEvent = document.createEvent("Events"); 
  126.                         uploadedTrueEvent.initEvent("personasrotatorUploadedTrue", false, false, window, null); 
  127.                         document.dispatchEvent(uploadedTrueEvent); 
  128.  
  129.                         document.getElementsByTagName("button")[0].firstChild.nodeValue="Redirecting...";
  130.  
  131.                     }
  132.                     
  133.                     else {
  134.                         
  135.                         alert("An error occured during upload");
  136.                     
  137.                     }
  138.                     
  139.                 }
  140.                 
  141.                 function ajaxOnError(event){
  142.                     
  143.                     alert('There was a problem with the request.');    
  144.                     
  145.                 }                
  146.                 
  147.                 // start the ajax req
  148.                 url="http://personasrotator.com/uploadSharePersona.php";
  149.                 
  150.                 req = new XMLHttpRequest();    
  151.                 
  152.                 if(req.upload==null){//For Backward Compability < FF 3.5
  153.                     
  154.                     req.onload = ajaxOnLoad;
  155.                     req.onerror = ajaxOnError;
  156.                     req.onuploadprogress = updateProgress;
  157.                     
  158.                 }
  159.                 
  160.                 else{//For => FF 3.5
  161.                 
  162.                     req.addEventListener("load",ajaxOnLoad,false);
  163.                     req.addEventListener("error",ajaxOnError,false);
  164.                     req.upload.addEventListener("progress",updateProgress,false);
  165.                 
  166.                 }
  167.                 
  168.                 
  169.                 req.open('POST',url,true);
  170.                 req.setRequestHeader("Content-type", "multipart/form-data; \    boundary="+boundaryString);
  171.                 req.setRequestHeader("Connection","close");
  172.                 req.setRequestHeader("Content-length",requestBody.length);
  173.                 req.sendAsBinary(requestBody);
  174.                 
  175.             }
  176.             
  177.             catch(err){
  178.                 alert(err);
  179.             }
  180.  
  181.         },
  182.         
  183.         checkServerState: function (event){
  184.             
  185.             //before upload check the server state. 0 or 1 may return.
  186.             var url="http://personasrotator.com/ajaxcheck/state.txt";
  187.  
  188.             // start the ajax req
  189.             var req = new XMLHttpRequest();
  190.  
  191.             req.onload = function() {
  192.                 
  193.                 if(parseInt(req.responseText)){
  194.                     
  195.                     //start ajax upload
  196.                     PersonasRotatorAjaxUpload.startAjaxUpload(event);
  197.                     
  198.                 }
  199.                 
  200.                 else {
  201.                 
  202.                     alert('Could not connect to upload server. Please try again later.');
  203.                     PersonasRotatorAjaxUpload.asking=false;
  204.                     
  205.                 }
  206.             }
  207.             
  208.             req.onerror=function(){
  209.                 alert('An error occured during server communication. Please try again later.');    
  210.             }
  211.  
  212.             req.open('GET',url,true);
  213.             req.channel.loadFlags |= Components.interfaces.nsIRequest.LOAD_BYPASS_CACHE;  
  214.             req.send(null);
  215.             
  216.             PersonasRotatorAjaxUpload.asking=true;
  217.             
  218.             document.getElementsByTagName("button")[0].firstChild.nodeValue="Please wait...";
  219.             
  220.         },
  221.             
  222.         checkFields: function (){
  223.  
  224.             var alerttext="";
  225.             var errorFoundNodeArray=[];
  226.             var nodeArray=[];
  227.  
  228.             var uploadform=document.getElementById("form");
  229.             var inputs=uploadform.getElementsByTagName("input");
  230.             var descriptiontextarea=uploadform.getElementsByTagName("textarea")[0];
  231.  
  232.             for (var i=0;i<inputs.length;i++){
  233.                 nodeArray.push(inputs[i]);
  234.             }         
  235.             nodeArray.push(descriptiontextarea);
  236.  
  237.             for (var i=0;i<nodeArray.length;i++){
  238.                 if(!/\S/.test(nodeArray[i].value.replace(/^\s+|\s+$/g,""))){    
  239.                     errorFoundNodeArray.push(nodeArray[i]);
  240.                 }
  241.             } 
  242.             
  243.             function returnFieldName(passedNode){
  244.                 return passedNode.previousSibling.firstChild.nodeValue;
  245.             }
  246.  
  247.             if(errorFoundNodeArray.length==3){alerttext=returnFieldName(errorFoundNodeArray[0])+", "+returnFieldName(errorFoundNodeArray[1])+" and "+returnFieldName(errorFoundNodeArray[2]);}
  248.             else if(errorFoundNodeArray.length==2){alerttext=returnFieldName(errorFoundNodeArray[0])+" and "+returnFieldName(errorFoundNodeArray[1]);}
  249.             else if(errorFoundNodeArray.length==1){alerttext=returnFieldName(errorFoundNodeArray[0])}
  250.  
  251.             if(errorFoundNodeArray.length>0){
  252.                 alert("Please fill out "+alerttext+ ((errorFoundNodeArray.length==1) ? " field." : " fields."));
  253.                 return false;
  254.             }
  255.             return true;
  256.             
  257.         },
  258.  
  259.         submitButtonClick: function (event){
  260.  
  261.             if(PersonasRotatorAjaxUpload.asking) {event.preventDefault();return;}
  262.         
  263.             if(!PersonasRotatorAjaxUpload.checkFields()){
  264.  
  265.                 event.preventDefault();
  266.                 return;
  267.  
  268.             }
  269.  
  270.             else {
  271.                 
  272.                 PersonasRotatorAjaxUpload.checkServerState(event);//check server state first
  273.                 event.preventDefault();
  274.  
  275.             }
  276.             
  277.         }
  278.  
  279.     }
  280.         
  281.     var nametooltipicon=document.getElementById("nametooltipicon");
  282.     var tagtooltipicon=document.getElementById("tagtooltipicon");
  283.     var descriptiontooltipicon=document.getElementById("descriptiontooltipicon");
  284.  
  285.     nametooltipicon.addEventListener("mouseover",PersonasRotatorAjaxUpload.showtooltip,false);
  286.     nametooltipicon.addEventListener("mouseout",PersonasRotatorAjaxUpload.hidetooltip,false);
  287.     nametooltipicon.addEventListener("mousemove",PersonasRotatorAjaxUpload.movetooltip,false);
  288.  
  289.     tagtooltipicon.addEventListener("mouseover",PersonasRotatorAjaxUpload.showtooltip,false);
  290.     tagtooltipicon.addEventListener("mouseout",PersonasRotatorAjaxUpload.hidetooltip,false);
  291.     tagtooltipicon.addEventListener("mousemove",PersonasRotatorAjaxUpload.movetooltip,false);
  292.  
  293.     descriptiontooltipicon.addEventListener("mouseover",PersonasRotatorAjaxUpload.showtooltip,false);
  294.     descriptiontooltipicon.addEventListener("mouseout",PersonasRotatorAjaxUpload.hidetooltip,false);
  295.     descriptiontooltipicon.addEventListener("mousemove",PersonasRotatorAjaxUpload.movetooltip,false);
  296.  
  297.     document.getElementById("submitbutton").addEventListener("click",PersonasRotatorAjaxUpload.submitButtonClick,false);
  298.  
  299.     
  300.